<#assign ctx=request.contextPath />
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>大表安装</title>
    <link rel="stylesheet" href="${ctx}/css.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.10&key=9b29a6048cb5ef7de6f503dc38e32d0c&plugin=AMap.ToolBar"></script>
    <!-- 加载远程定位脚本 -->
    <script type="text/javascript" src="${ctx}/remogeo.js"></script>
</head>
<body>
<div class="top">
    <a href="${ctx}/hello" class="backtrack"><img src="${ctx}/0.png"></a>
    <a href="javascript:history.back();" class="return"><img src="${ctx}/12.png"></a>
    <div class="box">
        大表安装
    </div>
</div>
<div class="empty"></div>
<form id="frm1" action="${ctx}/setupMeter/commitBase/${pd.id}" method="post">
    <table class="list_box">
        <tr class="lo_7">
            <td class="lo_3">水表列表</td>
            <td class="lo_4">
                <select name="meterList" class="zone">
                    <option value="">&nbsp;</option>
                    <#if meterList??>
                        <#list meterList as m1>
                            <option value="${m1.id}">${m1.name!""} (${m1.id})</option>
                        </#list>
                    </#if>
                </select>
            </td>
        </tr>
        <tr>
            <td class="lo_3 lo_5">水表ID(<span style="color: red;">*</span>)</td>
            <td class="lo_4 lo_5">
                <input name="meterId" value="${(meter.id)!""}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3 lo_5">表名(<span style="color: red;">*</span>)</td>
            <td class="lo_4 lo_5">
                <input name="meterName" value="${(meter.name)!""}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3 lo_5">表号</td>
            <td class="lo_4 lo_5">
                <input name="meterCode" value="${(meter.meterCode)!""}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3 lo_5">户号</td>
            <td class="lo_4 lo_5">
                <input name="userCode" value="${(meter.userCode)!""}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3 lo_5">数据ID(<span style="color: red;">*</span>)</td>
            <td class="lo_4 lo_5">
                <input name="extId" value="${(meter.extId)!""}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3 lo_5">水表口径</td>
            <td class="lo_4 lo_5">
                <input name="meterSize" value="${(meter.size)!""}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3 lo_5">脉冲比</td>
            <td class="lo_4 lo_5">
                <input title="脉冲比" type="text" name="meterPulse" value="${(meter.meterPulse)!""}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3 lo_5">安装时间(<span style="color: red;">*2018-12-23 15:32:20</span>)</td>
            <td class="lo_4 lo_5">
                <input name="rtuInstallDate" value="${(meter.rtuInstallDate?string("yyyy-MM-dd HH:mm:ss"))!}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3">所归水司</td>
            <td class="lo_4">
                <select name="firmId" class="zone">
                    <#list firmList as f1>
                        <option value="${f1.id}">${f1.name!""} (${f1.id})</option>
                    </#list>
                </select>
            </td>
        </tr>
        <tr>
            <td class="lo_3">安装位置
                <h4 id='status'></h4>
                <hr>
                <p id='result'></p>
            </td>
            <td class="lo_4">

                <div id="map1" class="map" style="height: 200px;"></div>
                <input type="hidden" id="meterLoc" name="meterLoc" value="${(meter.meterLoc)!""}">

                <script>
                    // wkt: POINT(39.984335 116.310097)
                    var z = document.getElementById("meterLoc").value;
                    if (z) {
                        function a() {
                            var firstLeftIndex = z.lastIndexOf('(');
                            var lastRightIndex = z.indexOf(')');
                            // 去掉首尾括号
                            var str = z.substring(firstLeftIndex + 1, lastRightIndex);
                            var arr = str.split(" ");
                            return arr;
                        };

                        var latlng = a()
                        var lat = Math.min(latlng[1], latlng[0])
                        var lng = Math.max(latlng[1], latlng[0])
                        var map = new AMap.Map("map1", {
                            zoom: 18,
                            center: [lng, lat]
                        });
                        var marker = new AMap.Marker({
                            map: map,
                            position: [lng, lat],
                            label: {
                                offset: new AMap.Pixel(-40, 35),//修改label相对于maker的位置
                                content: "点击大表图标打开高德地图"
                            }
                        })
                        marker.on('click', function (e) {
                            marker.markOnAMAP({
                                name: '大表图标',
                                position: marker.getPosition()
                            })
                        })
                    }
                </script>
            </td>
        </tr>
        <tr>
            <td class="lo_3">
                照片1
            </td>
            <td class="lo_4"><input type="file" name="findPhoto1"></td>
        </tr>
        <tr>
            <td class="lo_3">
                照片2
            </td>
            <td class="lo_4"><input type="file" name="findPhoto2"></td>
        </tr>
        <tr>
            <td class="lo_3">
                照片3
            </td>
            <td class="lo_4"><input type="file" name="findPhoto3" style="margin:0 auto;"></td>
        </tr>
        <tr>
            <td class="lo_3">
                定位人
            </td>
            <td class="lo_4">
                <#if finderList??>
                <select name="finderId" class="zone_2">
                    <#list finderList as user>
                        <option value="${user.id}">${user.name} (${user.id})</option>
                    </#list>
                </select>
                </#if>
            </td>
        </tr>

        <tr>
            <td class="lo_3">确认</td>
            <td class="lo_4">
                <input type="checkbox" name="canCommit" title="确认" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3">提交</td>
            <td class="lo_4"><input type="submit" value="  提交 " class="affirm_1"></td>
        </tr>

    </table>
</form>
</body>
</html>
